<template>
    <div class="order-detail clearfix">
      <h1 class="title"><span @click="goBack" class="blueFont">My Order</span> > <span>#{{list_orderNo}}</span></h1>
      <h2 class="title2">{{headLine}}</h2>
      <div class="cont">
          <div class="cont-left">
            <Sliders :images="imgSrc"></Sliders>
          </div>
          <div class="cont-right">
          <div class="state-box">
            <h3 class="state-title">Order Tracking</h3>
            <div class="space-h3"></div>
            <table class="table-show">
              <tr  v-for="(item,index) in tracke_list" :key="item.time">
                <td class="time">
                  <p>{{item.date}}</p>
                  <p>{{item.time}}</p>
                </td>
                <td class="link">
                  <div class="link-show" :class="index === tracke_list.length-1 ? 'hide':''"></div>
                  <span class="round"  v-bind:class="{'red-round': item.showBtn,'success-round':index === 0}"></span>
                </td>
                <td class="des">
                  <p class="words" :class="index === 0 ? 'black-font':''">{{item.des}}</p>
                  <div class="space-div"></div>
                </td>
              </tr>
            </table>
            <div style="width:100%;height:45px;line-hieght:45px;font-size:16px;text-align: center" v-if="tracke_list.length === 0">
              No more information
            </div>
          </div>
          <button class="unable-btn" v-show="rejectBtn"  @click="goResumit(list_orderNo,amazonUrl,urlKeyWorld)" >Resumit</button>
        </div>
      </div>
      <div class="product-detail">
        <h3 class="title3">Product Detail</h3>
        <div class="detail-info" v-html="description"></div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import {ERR_OK} from 'api/config'
  import {MyOrderList} from 'api/my-order-list'
  import {mapGetters,mapMutations,mapActions} from 'vuex'
  import Sliders from 'components/sliders/sliders'
  import {getCategory} from 'common/js/dom'
    export default {
      data() {
        return {
          variations: [],
          currentIndex:0,
          orders:[],
          isUnable:false,
          toggleHeader: false,
          tracke_list:[],
          headLine: '',
          sellerName: '---',
          list_orderNo: '---',
          category: '---',
          discount: 0,
          price: 0,
          discountRate: 0,
          imgSrc: [],
          rejectBtn: false,
          description :'',
          amazonUrl:'',
          urlKeyWorld :''
        }
      },
      computed: {
        ...mapGetters([
            'orderNo'
          ])
      },
      created() {
        this.$nextTick(function(){
            this._MyOrderList()
        })
      },
      methods: {
        goBack(){
          this.$router.push({//
            path: '/my-order/cashback'
          });
        },
        _MyOrderList() {
          //保持页面不刷新
          const path = this.$router.currentRoute.fullPath.split('/')
          let orderNo = ''
          if (!this.orderNo) {
            if (path[path.length-1]) {
              orderNo = path[path.length-1]
            }
          } else {
            orderNo = this.orderNo
          }
          if (!orderNo) {
            this.$router.push(`/${path[1]}`)
            return
          }
            this.tracke_list =[]
            MyOrderList(orderNo).then((res) => {
              if(res.length === 0) return
              const _this = this
               this.imgSrc = res.orderItems[0].productInOrder.images
               this.headLine = res.orderItems[0].productInOrder.headLine
              // this.sellerName = res.orderItems[0].productInOrder.sellerName
               this.list_orderNo = res.orderNo
               let categoryId = res.orderItems[0].productInOrder.categories[0]
               this.category = getCategory(categoryId);
              //this.discount = res.orderItems[0].productInOrder.price
              // this.price = res.orderItems[0].productInOrder.originalPrice
              // this.discountRate = res.orderItems[0].productInOrder.discount
               this.description = res.orderItems[0].productInOrder.description
               this.amazonUrl = res.orderItems[0].productInOrder.url
                this.urlKeyWorld =  res.orderItems[0].productInOrder.urlKeyWords ||'dp'
              let orderEvents = res.orderEvents
              let orderEnventLen = orderEvents.length - 1;
              orderEvents.forEach(function (item, index) {
                let ret = {}
                let allDate = orderEvents[orderEnventLen - index].eventTime.split("T");
                ret.date = allDate[0].replace(new RegExp("-", "gm"), '/');
                ret.time = allDate[1].substring(0, 5);
                ret.des = orderEvents[orderEnventLen - index].description;
                _this.tracke_list.push(ret)
              })
              if (res.orderStatus === 'Rejected'){
                this.rejectBtn = true
              } else{
                this.rejectBtn = false
              }
            })
        },
        goResumit(orderNo,url,urlKeyWorld){
          let headLine = urlKeyWorld || 'dp'
          this.$router.push({ //跳到request 重写订单好
            path: `/new-guide/${headLine}/${this.list_orderNo}`
          });
          let data ={
            orderNo: orderNo,
            url: url,
          };
          this.setResubmit(data);
        },
      ...mapMutations({
          setResubmit: 'SET_RESUBMIT_VAL'
        }),
      ...mapActions([
          'StartLoading'
        ])
      },
      watch:{
        '$route'(to, from) {
          if (from.path === '/my-order/') {
            this._MyOrderList()
          }
        }
      },
      components: {
        Sliders
      }
        }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .order-detail
    width:100%;
    margin:0 auto;
    padding-bottom:70px
    .title
      font-size: 16px;
      line-height: 90px;
      color: #333333
      .blueFont
        color:#289fee
        cursor:pointer
    .title2
      width:100%;
      display: -webkit-box;
      -webkit-line-clamp: 1 !important;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 34px;
      font-size: 24px;
      padding-bottom: 30px;
    .cont
      height:500px;
      .cont-left
        width:680px;
        height:100%
        padding-right:20px;
        border-right:1px solid #ececec
        float:left;
      .cont-right
        width:350px;
        float:right
        .state-box
          border:1px solid #dcdcdc
          height:auto;
          .state-title
            text-align left
            height:44px
            line-height:44px
            font-size:18px
            color: #333
            background #f6f7f8
            border-bottom:1px solid #dcdcdc
            padding-left: 23px;
        .space-h3
          height:50px;
        .table-show
          color: #98999a
          padding-left:3%
          tr:nth-child(1)
            .link
              .success-round
                position:absolute
                left: -6px;
                top:0
                display:inline-block
                width:14px
                height:14px
                background #2f4bf7
              .red-round
                position:absolute
                left: -6px;
                top:0
                display:inline-block
                width:12px
                height:12px
                background-image url('my_order_list_del.png')
                background-color:#fff
                background-repeat no-repeat
                background-position center center
              .des
                .btn
                  width:70%
                  height:28px;
                  line-height:28px;
                  color: #ffffff
                  background #2f4bf7
                  text-align center
                  margin:10px 0
                  border:none
                  display:block
          .time
            text-align: right
            width: 27%
            height:auto
            padding-right:5%
            line-height: 20px
            p
              font-size: 14px;
          .link
            width:5%
            padding:5px 0
            position:relative
            .link-show
              position:absolute
              left:0
              width:1px
              height: 100%
              background #ccc
            .hide
              display:none
            .round
              display:inline-block
              position:absolute
              left: -4px;
              top: 5px;
              width: 9px;
              height: 9px;
              border-radius: 50%
              background #bbb
          .des
            width:56%
            padding-right: 4%;
            font-size:14px;
            word-break:keep-all
            text-align center
            .words
              font-size:14px
              line-height:20px
              text-align left
            .black-font
              color:#000
            .btn
              width:70%
              height:28px;
              line-height:28px;
              color: #ffffff
              background #2f4bf7
              text-align center
              margin:10px 0
              border:none
            .space-div
              height:45px
    .product-detail
      margin-top:45px;
      width:700px;
      height:auto;
      border:1px solid #dcdcdc
      .title3
        height:44px;
        line-height:44px
        padding-left: 10px;
        background #f6f7f8
        border-bottom:1px solid #dcdcdc
      .detail-info
        min-height:150px;
        padding:20px;
        line-height: 30px
      t-pod.t-pod
        background: #fff;
        padding: 0px 6px 0 16px;
      div.t-pod
        overflow: hidden;
      .toggle-header
        background: 0;
        border: 0;
        color: #333;
        position: relative
        padding: 7px 0;
      .t-pod.t-pod .toggle-header h2
        display: inline-block;
        width: calc(100% - 35px);
        vertical-align: middle;
      .t-pod.t-pod.toggle-drawer h2
        border-bottom: 0;
        color: #bbb;
      .t-pod.t-pod h2
        background: 0;
        border: 0;
        color: #333;
        font-size: 15px;
      .t-pod.t-pod.toggle-drawer .toggle-content
        border-top: 1px solid #e6e7e8;
        color:#75787b
      .toggle-content h4
        font-weight bold !important
        padding: 8px 0;
      .toggle-content-wrap
        color: #555
        padding:10px 8px
        line-height 2
        font-size:14px
  .unable-btn
    width:100%;
    height:40px;
    line-height:40px;
    color:#fff;
    font-size:16px;
    background #fa4c4d
    border:none
    border-radius: 2px;
    margin-top: 30px;
    cursor:pointer

</style>
